<template>
  <div id="app">
    <LEFT>
      <!-- 将内容插入到 LEFT 组件的 other 区域 -->
      <template v-slot:otherContent>
        <div class="content">
          <div class="head">
            <div id="one"></div>
            <div id="two">
              <div class="course_count">
                <h2>课程数量</h2>
                <p>{{ courseCount }}</p>
              </div>
            </div>
            <div id="three">
              <div class="user_count">
                <h2>用户数量</h2>
                <p>{{ userCount }}</p>
              </div>
            </div>
          </div>
          <div id="center"></div>
        </div>
      </template>
    </LEFT>
  </div>
</template>
    
    <script>
import { onMounted } from "vue";
import LEFT from "../../components/left/index.vue";
import { color } from "echarts";
export default {
  name: "index",
  components: {
    LEFT,
  },
  data() {
    return {
      courseCount: 0, // 课程数量
      userCount: 0, // 用户数量
    };
  },
  methods: {
    loaded() {
      // 检查本地存储中是否有 token
      if (localStorage.getItem("token") === null) {
        this.$router.push("/login"); // 重定向到登录页面
      }
    },

    echartsone() {
      var myChart = this.$echarts.init(document.getElementById("one"));
      var option = {
        title: {
          left: "left",
          color: "#000",
        },
        series: [
          {
            type: "pie",

            data: [
              {
                value: 626,
                name: "思想政治与公共管理",
              },
              {
                value: 834,
                name: "数学与统计",
              },
              {
                value: 848,
                name: "计算机与信息技术",
              },
              {
                value: 535,
                name: "自然科学与工程技术",
              },
              {
                value: 510,
                name: "经济与管理",
              },
              {
                value: 335,
                name: "科研与学术素养",
              },
              {
                value: 610,
                name: "马克思主义",
              },
              {
                value: 335,
                name: "法律与法治",
              },
              {
                value: 310,
                name: "高等数学",
              },
            ],
            roseType: "area",
            emphasis: {
              // 鼠标悬停时的高亮样式设置
              scale: true, // 是否放大扇区，默认为true（放大）
              focus: "series", // 鼠标悬停时仅对扇区有效
              label: {
                show: true, // 显示标签
                fontSize: "16",
                fontWeight: "bold",
              },
              labelLine: {
                show: true, // 显示标签引导线
              },
            },
          },
        ],
        tooltip: {
          trigger: "item", // 触发类型，默认为鼠标悬停触发
          formatter: "{a} <br/>{b}: {c} ({d}%)", // 提示框内容的格式化字符串
        },
      };

      myChart.setOption(option);
    },

    echartsfour() {
      var myChart = this.$echarts.init(document.getElementById("center"));
      var option = {
        title: {
          text: "一周系统访问量",
          left: "center",
          textStyle: {
            color: "#333",
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        backgroundColor: "#f9f9f9",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "#999",
              width: 1,
            },
          },
          formatter: function (params) {
            let result = params[0].name + "<br/>";
            params.forEach(function (item) {
              result +=
                item.marker + item.seriesName + " : " + item.value + "<br/>";
            });
            return result;
          },
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#ccc",
            },
          },
          axisLabel: {
            color: "#666",
            fontSize: 14,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee",
            },
          },
          axisLabel: {
            color: "#666",
            fontSize: 14,
          },
        },
        series: [
          {
            name: "访问量",
            type: "line",
            data: [150, 230, 224, 218, 135, 147, 260],
            smooth: true,
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#3a7bd5" },
                { offset: 1, color: "#00d2ff" },
              ]),
            },
            itemStyle: {
              color: "#00d2ff",
              borderColor: "#fff",
              borderWidth: 2,
              shadowColor: "rgba(0, 0, 0, 0.2)",
              shadowBlur: 5,
            },
            emphasis: {
              focus: "series",
              itemStyle: {
                color: "#ff7f50",
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            label: {
              show: true,
              position: "top",
              color: "#333",
              fontWeight: "bold",
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(58, 123, 213, 0.3)" },
                { offset: 1, color: "rgba(0, 210, 255, 0.1)" },
              ]),
            },
          },
        ],
      };
      myChart.setOption(option);
    },

    // 获取课程数量
    getCourseCount() {
      this.$http.get("/api/resources/list/page").then((res) => {
        console.log(res.data);

        this.courseCount = res.data.total;
      });
    },
    // 获取用户数量
    getUserCount() {
      this.$http.get("/api/sysUser/list").then((res) => {
        console.log(res.data);
        this.userCount = res.data.total;
      });
    },
  },

  mounted() {
    this.loaded();
    this.echartsone();
    this.echartsfour();
    this.getCourseCount();
    this.getUserCount();
  },
};
</script>
  
<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
  margin: 0px;
  padding: 0px;
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .head {
      width: 100%;
      height: 300px;
      display: flex;
      #one {
        width: 33.33%;
        height: 100%;
        margin-right: 20px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }
      #two {
        width: 33.33%;
        height: 100%;
        margin-right: 20px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .course_count {
        width: 100%;
        height: 260px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 12px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: "Segoe UI", sans-serif;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
      }

      .course_count:hover {
        transform: scale(1.03);
      }

      .course_count h2 {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
      }

      .course_count p {
        margin: 8px 0 0;
        font-size: 36px;
        font-weight: 600;
      }
      #three {
        width: 33.33%;
        height: 100%;
        margin-right: 20px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      }

      .user_count {
        width: 100%;
        height: 260px;
        background: linear-gradient(135deg, #11998e, #38ef7d);

        border-radius: 12px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-family: "Segoe UI", sans-serif;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
      }

      .user_count:hover {
        transform: scale(1.03);
      }

      .user_count h2 {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
      }

      .user_count p {
        margin: 8px 0 0;
        font-size: 36px;
        font-weight: 600;
      }
    }
    #center {
      width: 100%;
      height: 550px;
      margin: 20px 0px;
      background-color: #fff;
    }
  }
}
</style>